<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html style='height:100%;'>
  <head>
    <base href="<%=basePath%>">
    
    <title>周边配套表单</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" href="css/vivo.css">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
	<link rel="stylesheet" href="js/bootstrap2/css/bootstrap-table.css">
	<link rel="stylesheet" href="css/common.css">
    <link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="js/webuploader-0.1.5/webuploader.css" />
	<!--  图片放大 测试 -->
	<!-- <link rel="stylesheet" href="js/jQueryViewer/css/viewer.min.css"> -->
	
	<script src="js/jquery-1.11.1.js"></script>
	<script src="js/bootstrap2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script> 
	<script src="js/select2/select2.min.js"></script>
    <script type="text/javascript" src="js/sharefunction.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
    <script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
    <script src="js/bootstrap2/js/bootstrap-table.js"></script>
	<script src="js/bootstrap2/js/bootstrap-table-zh-CN.js"></script>
	<!-- 图片放大 -->
	<script src="js/postbird-img-glass/postbird-img-glass.js" ></script>
	
	<!--  图片放大 测试 -->
	<!-- <script src="js/jQueryViewer/js/viewer.min.js"></script> -->
	<script type="text/javascript">
	var rimFileList=new Array();//删除附件的id
	var s2;
	var rimFlag;//查看状态
	$(document).ready(function() {
		s2 = $("#assortType").select2({
			 tags: true
		});
		initSelectData();
		s2.val("公共交通").trigger("change");
		//异步加载，ajax还未执行完赋值，就已经执行完getFiles()方法
		getFiles();
		//初始化表单信息
		getRimAssortData();
		
		$("#assortType").change(function() {
			var val = $(this).val();
			$("#assortName1").text(val);
			//修改配套类型
			$("input[name='Assort_type']").val(val);
		});
		
	});
	
	$(function(){
		//初始化表单
		mySubmit("zhoubianForm",rimAssortFormData,rimAssortSuccess);
	})
	//获取建筑数量下的使用功能集合
	function getRimAssortData() {
		var obj;
		var url = "assortInfo/getRimAssort";
		//pid:建筑数量id 预留
		var id = '${id}';
		$.getJSON(url, {
			id :id
		}, function(data, status) {
			if (status == "success") {
			
				if(data !=null ){
					$("input[name='Assort_type']").val(data.assortType);
					$("input[name='Assort_Name']").val(data.assortName);
					$("#assortName1").text(data.assortName);
					$("#zhoubianForm #entityId_rimId").val(data.id);
					//$("input[name='financialinstitution']").val(data.financialinstitution);
					s2.val(data.assortType).trigger("change");
					rimFlag='${rimFlag}';//1：查看；2：编辑
					if(rimFlag=="1"){
						//隐藏按钮
						$("#zhoubianForm #btn_div2").hide();
						$("#zhoubianForm #btn_div1").hide();
						$("#zhoubianForm").find("input,textarea").attr("readonly",true);
						$("#zhoubianForm").find(".addbtn,select").attr("disabled",true);
						//禁止点击上传按钮
						$("#zhoubianForm div[id^='filePicker']").unbind("click").click(function(){
							return false;
						}).hide();
						
					}else{
						$("#zhoubianForm #btn_div2").show();
						$("#zhoubianForm #btn_div1").hide();
						$("#zhoubianForm .uploadcancel").show();
					}
					
				}
			}
		});
	}

	function getFiles(){
		getFileList($("#zhoubianForm #entityId_rimId").val(),"周边配套","#imgzbpt",setRimRFL,imgRimPlus);
	}
	var viewer ;
	function imgRimPlus(data){
		$("#zhoubianForm .uploadcancel").hide();
		//图片放大
		PostbirdImgGlass.init({
	    	domSelector:"img",
	    	animation:true,
	    	//height:'80%',
	    	myDocument:window.parent.parent.parent
		});
	}
	//设置待删除附件的值到集合中
	function setRimRFL(id,_this){
		layer.confirm('删除该图片？',{
			title:'警告',
			icon:0,
			shade:[0.1, '#fff']
		},function(){
			rimFileList.push(id);
			//删除指定缩略图
			$("#"+id).remove();
			layer.close(layer.index);
		});
	}
	//图片上传成功后隐藏删除按钮
	function imgRimBtnHide(id){
		//隐藏图片删除按钮
		$("#"+id+" span").hide();
		//禁止点击上传按钮
		$("#zhoubianForm div[id^='filePicker']").unbind("click").click(function(){
			return false;
		}).hide();
	}
	//显示图片删除按钮
	function imgRimBtnShow(){
		//显示图片删除按钮 
		$("div.file-item span").show();
		//禁止点击上传按钮
		$("#zhoubianForm div[id^='filePicker']").unbind("click").show();
	}
	
	var optRim;
	//optCar操作字段，0：临时保存；1：新增；2：修改
	function saveRim(val){
		optRim=val;
		if(val==3){
			//解除锁定状态
			var index=layer.confirm('确定开启编辑状态？', {
			 	offset:'20%',
				shade:0
			}, function(){
			  //去除只读开启按钮编辑
			   $("#zhoubianForm").find("input,textarea").attr("readonly",false);
			   $("#zhoubianForm").find("select,.addbtn").attr("disabled",false);
			   $("#zhoubianForm #modifyBtn").hide();
			   $("#zhoubianForm .hidbtn").addClass("showbtn");
			   //显示图片删除按钮
			   imgRimBtnShow();
			   layer.close(index);
			});
		}else{
			
			$("#zhoubianForm").submit();
		}
	}
	
	function initSelectData() {
		var html = "";
		//var arr = [ "公共交通", "公共医疗", "商场超市", "教育机构", "行政机构", "环卫服务", "休闲场所",
		//		"餐饮门店", "家政服务", "美容美发","金融机构","其他"];
		/*20180206 修改 更改为动态输入*/
		var arr=${requestScope.typeList};
		for (var i = 0; i < arr.length; i++) {
			html = "<option value=\""+arr[i]+"\">" + arr[i] + "</option>";
			$("#assortType").append(html);
		}
	}
	var x;//load弹窗index
	function rimAssortFormData(){
		x=layer.load(2);
		var Assort_type=$("input[name='Assort_type']").val();
		var Assort_Name=$("input[name='Assort_Name']").val();
		var id = $("#zhoubianForm #entityId_rimId").val();
		//var financialinstitution = $("input[name='financialinstitution']").val();
		//建筑id
		var fkProjectid=parent.parent.parent.projectID;
		var fileList="["+$("#zbptId").val()+"]";
		return {assortType:Assort_type,
				assortName:Assort_Name,
				fkProjectid:fkProjectid,
				fileList:fileList,
				opt :optRim,
				id:id,
				fIds:rimFileList
				//financialinstitution:financialinstitution
			};
	}
	function rimAssortSuccess(data,status){
		if(data.data=='保存成功'){
			/* $("input[name='Assort_type']").val("");
			$("input[name='Assort_Name']").val("");
			$("#zbptId").val("");
			//重置上传插件
			$("#imgzbpt").find("*").remove();
			upload_zbptId.reset(); */
			layer.alert("保存成功！",{
				offset:'20%',
				shade:[0.1,'#fff']
			},function(){
				parent.location.reload();
			});
	    	
	    	layer.close(x);
		}else{
			layer.alert("保存失败！");
	    	layer.close(x);
		}
	}
</script>
</head>
<body>
<form class="cmxform" id="zhoubianForm" method="post" action="assortInfo/addrimAssort" onsubmit="return false;">
	<div>
		<div id="addRim" style="margin-top:20px;">
			<!-- 隐藏域 -->
			<input name="rimId" id="entityId_rimId" type="hidden" value="${id }">
			<div>
				<p>
					<span class="style_btn">周边配套</span> <b class="style_input"> 
					<select class="js-example-basic-single" name="assortType" id="assortType" style="width:135px;">

					</select>
					</b>
				</p>
				<table>
					<tr>
						<td width="70">
							<b id="assortName1">公共交通</b>
						</td>
						<td>
							<input name="Assort_type" value="公共交通" hidden="hidden" >
							<input name="Assort_Name" value="" />&nbsp;&nbsp;&nbsp;
						</td>
						<td width="290">
							<jsp:include page="../p_utilePage/Article-agile.jsp">
								<jsp:param value="zbptId" name="id" />
								<jsp:param value="imgzbpt" name="smallImgId" />
								<jsp:param value="周边配套" name="articleId" />
							</jsp:include>
						</td>
						<!-- <td width="90">
							<b>金融机构</b>
						</td>
						<td width="290">
							<input name="financialinstitution" value="" />&nbsp;&nbsp;&nbsp;
						</td> -->
					</tr>
					<tr>
						<!-- 存放缩略图 -->
						<td colspan="3">
							<div id="imgzbpt">
							
							</div>
						</td>
					</tr>				
				</table>
			</div>
			
		</div>
		<div style="width:100%;text-align:center; padding-top:20px">
			<div id="btn_div1">
				<!-- 该页面数据展示会将创建时间展示出来，提交是没有创建时间的  所以隐藏提交 以后需要在放开 ---杨传龙 
				<button class="btn btn-danger radius my-btn"
					onclick="saveRim(0)" type="button">提交</button> -->
				<button class="btn btn-danger radius my-btn"
					onclick="saveRim(1)" type="button">保 存</button>
				<a class="btn btn-default radius" onClick="resetRim();">
					重置 </a>
				<br />
			</div>
			<div id="btn_div2" style="display:none;">
				<!-- <button id="modifyBtn" type="button" class="btn btn-danger radius my-btn"
					onclick="saveRim(3)">启用编辑</button> -->
				<button class="btn btn-danger radius my-btn "
					onclick="saveRim(2)" type="button">保存修改</button>
				<a class="btn btn-default radius " onClick="resetRim();">
					重置 </a>	
			</div>
		</div>

	</div>
</form>
</body>
<script type="text/javascript">
	function resetRim(){
		$("#addRim").find("input:not([id^=entityId_])").val("");
		$("#addRim").find("select").val("公共交通").trigger("change");
	}
</script>
</html>
